import React from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { ListRowState } from "../../types";
import { ActionBar } from "react-vant";
import { CartO, ChatO, ShopO } from "@react-vant/icons";
import { useDispatch } from "react-redux/es/exports";
const Detail = () => {
  const location = useLocation();
  const v = location.state as ListRowState;
  const dispatch = useDispatch()
  const navigate = useNavigate()
  return (
    <div>
      <div>
        <img src={v.image} width="100%" alt="" />
        <h3>{v.title}</h3>
        <p>{v.word}</p>
        <p>{v.price}</p>
      </div>
      <div>
        <ActionBar>
          <ActionBar.Icon
            icon={<ChatO />}
            text="客服"
            onClick={() => console.log("chat click")}
          />
          <ActionBar.Icon
            icon={<CartO />}
            text="购物车"
            onClick={() => navigate('/car')}
          />
          <ActionBar.Icon
            icon={<ShopO />}
            text="店铺"
            onClick={() => console.log("shop click")}
          />
          <ActionBar.Button
            type="danger"
            text="立即购买"
            onClick={() => dispatch({ type: 'addCar', payload: v })}
          />
        </ActionBar>
      </div>
    </div>
  );
};

export default Detail;
